<template>
    <div class="flex gap-2 flex-wrap">
        <!-- 我喜欢的音乐 -->
        <div class="w-32 h-40">
            <div class="w-32 h-32 cursor-pointer relative">
                <img class="w-full h-full rounded-xl"
                    src="https://img1.baidu.com/it/u=2526782352,137544254&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1697389200&t=48c26e78e138e88cfc418b17f1960bda"
                    alt="">
                <div class=" absolute top-0 left-0 w-32 h-32 bg-black/40 rounded-xl flex items-center justify-center">
                    <i class="iconfont icon-like icon text-[#ff4757]"></i>
                </div>
            </div>
            <div class="w-32 h-8  text-xs font-normal text-ellipsis truncate leading-8 cursor-pointer hover:text-[#ff4757]">我喜欢的音乐</div>
        </div>

        <!-- 收藏的歌单 -->
        <div class="w-32 h-40">
            <div class="w-32 h-32 cursor-pointer">
                <img class="w-full h-full rounded-xl"
                    src="https://img1.baidu.com/it/u=2526782352,137544254&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1697389200&t=48c26e78e138e88cfc418b17f1960bda"
                    alt="">
            </div>
            <div class="w-32 h-8  text-xs font-normal text-ellipsis truncate leading-8 cursor-pointer hover:text-[#ff4757]">AlbumNameNamename</div>
        </div>
        <div class="w-32 h-40">
            <div class="w-32 h-32 cursor-pointer">
                <img class="w-full h-full rounded-xl"
                    src="https://img1.baidu.com/it/u=2526782352,137544254&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1697389200&t=48c26e78e138e88cfc418b17f1960bda"
                    alt="">
            </div>
            <div class="w-32 h-8  text-xs font-normal text-ellipsis truncate leading-8 cursor-pointer hover:text-[#ff4757]">AlbumNameNamename</div>
        </div>
        <div class="w-32 h-40">
            <div class="w-32 h-32 cursor-pointer">
                <img class="w-full h-full rounded-xl"
                    src="https://img1.baidu.com/it/u=2526782352,137544254&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1697389200&t=48c26e78e138e88cfc418b17f1960bda"
                    alt="">
            </div>
            <div class="w-32 h-8  text-xs font-normal text-ellipsis truncate leading-8 cursor-pointer hover:text-[#ff4757]">AlbumNameNamename</div>
        </div>
        <div class="w-32 h-40">
            <div class="w-32 h-32 cursor-pointer">
                <img class="w-full h-full rounded-xl"
                    src="https://img1.baidu.com/it/u=2526782352,137544254&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1697389200&t=48c26e78e138e88cfc418b17f1960bda"
                    alt="">
            </div>
            <div class="w-32 h-8  text-xs font-normal text-ellipsis truncate leading-8 cursor-pointer hover:text-[#ff4757]">AlbumNameNamename</div>
        </div><div class="w-32 h-40">
            <div class="w-32 h-32 cursor-pointer">
                <img class="w-full h-full rounded-xl"
                    src="https://img1.baidu.com/it/u=2526782352,137544254&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1697389200&t=48c26e78e138e88cfc418b17f1960bda"
                    alt="">
            </div>
            <div class="w-32 h-8  text-xs font-normal text-ellipsis truncate leading-8 cursor-pointer hover:text-[#ff4757]">AlbumNameNamename</div>
        </div>
        <div class="w-32 h-40">
            <div class="w-32 h-32 cursor-pointer">
                <img class="w-full h-full rounded-xl"
                    src="https://img1.baidu.com/it/u=2526782352,137544254&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1697389200&t=48c26e78e138e88cfc418b17f1960bda"
                    alt="">
            </div>
            <div class="w-32 h-8  text-xs font-normal text-ellipsis truncate leading-8 cursor-pointer hover:text-[#ff4757]">AlbumNameNamename</div>
        </div>
        <div class="w-32 h-40">
            <div class="w-32 h-32 cursor-pointer">
                <img class="w-full h-full rounded-xl"
                    src="https://img1.baidu.com/it/u=2526782352,137544254&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1697389200&t=48c26e78e138e88cfc418b17f1960bda"
                    alt="">
            </div>
            <div class="w-32 h-8  text-xs font-normal text-ellipsis truncate leading-8 cursor-pointer hover:text-[#ff4757]">AlbumNameNamename</div>
        </div>
        <div class="w-32 h-40">
            <div class="w-32 h-32 cursor-pointer">
                <img class="w-full h-full rounded-xl"
                    src="https://img1.baidu.com/it/u=2526782352,137544254&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1697389200&t=48c26e78e138e88cfc418b17f1960bda"
                    alt="">
            </div>
            <div class="w-32 h-8  text-xs font-normal text-ellipsis truncate leading-8 cursor-pointer hover:text-[#ff4757]">AlbumNameNamename</div>
        </div>
        <div class="w-32 h-40">
            <div class="w-32 h-32 cursor-pointer">
                <img class="w-full h-full rounded-xl"
                    src="https://img1.baidu.com/it/u=2526782352,137544254&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1697389200&t=48c26e78e138e88cfc418b17f1960bda"
                    alt="">
            </div>
            <div class="w-32 h-8  text-xs font-normal text-ellipsis truncate leading-8 cursor-pointer hover:text-[#ff4757]">AlbumNameNamename</div>
        </div>
    </div>
</template>
<style>
.icon{
    font-size: 32px;
}
</style>